<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="info">
      <el-row>
        <el-col :span="3" style="text-align: right">
          <el-icon><CircleCheck /></el-icon>
        </el-col>
        <el-col :span="16" style="height: 104px;">
          <div>订单提交成功：去付款喽~</div>
          <div>请在15分钟内完成支付</div>
        </el-col>
        <el-col :span="5">
         应付总额： <span class="totle">￥{{total.toFixed(2)}}</span>元
        </el-col>
      </el-row>
        <div class="demo-collapse">
          <el-collapse>
            <el-collapse-item title="详情信息" name="1">
              <el-row>
                <el-col :span="2">订单号</el-col>
                <el-col :span="10">{{order.id}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="2">收获信息</el-col>
                <el-col :span="10">{{order.addrDetail}}</el-col>
              </el-row>
              <el-row>
                <el-col :span="2">商品名称：</el-col>
                <el-col :span="10">
                  <div v-for="(orderDetail,index) in order.orderDetails" :key="index">
                    {{orderDetail.goods.name}}{{orderDetail.goods.color}} {{orderDetail.goods.version}}
                  </div>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </div>

  </div>
  <div class="pay">
    <div>支付工具</div>
    <div>
      <ul>
        <li>余额支付</li>
        <li>支付宝支付</li>
        <li>微信支付</li>
        <li>银行卡支付</li>
      </ul>
    </div>
    <div>
      <el-form>
      <el-input type="password" v-model="payPwd" style="margin:10px 10px;width: 200px" placeholder="请输入支付密码"> </el-input>
        <el-button type="danger" size="large" @click="pay">支付</el-button>
      </el-form>

    </div>

  </div>
</template>

<script setup>

import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import orderApi from "@/api/orderApi.js";
import {CircleCheck} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
const router=useRouter();
//保存订单的信息
const order=ref({});
//总金额
const total=ref(0);
//支付密码
const payPwd=ref("");

const route=useRoute();
function getOrder(){
  const orderId= route.query.orderId;
  orderApi.selectById(orderId)
      .then(resp =>{
        if(resp.code==10000){
          order.value=resp.data;
          for (let orderDetail of order.value.orderDetails){
            total.value += orderDetail.count * orderDetail.price;
          }

        }else {
          ElMessage.error(resp.msg);
        }
      })
}
//支付
function pay() {
  orderApi.pay({
    orderId: route.query.orderId,
    payPwd: payPwd.value
  })
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg)
          router.push("/user/orderList");

        }else {
          ElMessage.error(resp.msg);
        }
      })
}

getOrder()
</script>
<style scoped>
.info, .pay{
  margin-top: 30px;
  background-color: #FFFFFF;
  padding: 30px;
}
.info .el-icon{
  font-size: 100px;
  color: #83c44Eff;
}
.info .total{
  font-weight: bold;
  color: var(--theme-color);
}
.pay ul li{
  padding: 0 10px;
  margin: 10px 15px;
  float: left;
  border: 2px solid #AAAAAA;
  height: 40px;
  line-height: 40px;
}
</style>